<template>
      <div id="editauth">
            <el-dialog
            :title="editData.title"
            :visible.sync="editData.show"
            width="50%"
            center>
                  <div class="rules">
                        <el-checkbox-group v-model="auth" @change="handleCheckedCitiesChange">
                              <div class="container">
                                    <el-checkbox v-for="(item, index) in MenuList" :label="item.id" :key="index">
                                          {{ item.title }}
                                    </el-checkbox>
                              </div>
                        </el-checkbox-group>
                  </div>
                  <span slot="footer" class="dialog-footer">
                        <el-button @click="editData.show = false">取 消</el-button>
                        <el-button type="primary" @click="onConfirm">确 定</el-button>
                  </span>
            </el-dialog>
      </div>
</template>

<script>
      export default {
            props: {
                  editData: Object,
                  roleData: Object
            },
            computed: {
                  token() {
                        return localStorage.miniToken
                  },
                  isShow() {
                        return this.editData.show
                  }
                  
            },
            data() {
                  return {
                        auth: [],
                        MenuList: [],
                  }
            },
            
            created () {
                  this.getMenuList();
            },
            mounted() {
                  this.getArr()
            },
            watch: {
                  isShow( newVal, oldVal) {
                        if (newVal) {
                              this.getArr()
                        }
                  },
            },
            methods: {
                  // 提交
                  async onConfirm() {
                        let rules = this.auth.join(",")
                       // console.log(rules);
                        
                        let res = await this.$axios.post("/admin/role/rule_deploy_change", {
                              token: this.token,
                              rules,
                              id: this.roleData.id
                        })
                        console.log(res);
                        if (res.data.code == 202 || res.data.code == 204) {
                              this.$message.success("更新成功!")
                              this.$emit("updated","")
                              this.editData.show = false
                        }
                        
                  },
                  // 获取导航按钮
                  async getMenuList() {
                        let res = await this.$axios.post("/admin/role/menu_module_show", { token: this.token })
                        // console.log(res);
                        this.MenuList = res.data.data
                  },
                  // 选择变化
                  handleCheckedCitiesChange( e ) {
                        console.log(e);
                        
                  },
                  // 格式化ID
                  getArr() {
                        if (this.roleData.rules && this.editData.show) {
                               let reg = /,/g
                               let reg2 = /NaN/g
                              let arr = []
                              let str = this.roleData.rules.replace(reg, "").replace(reg2, "  ")
                              console.log(str);
                              
                              for (let i = 0; i < str.length; i++) {
                                    arr[i] = Math.floor(str.charAt(i))
                              }
                              //console.log(arr);
                              
                              this.auth = arr
                        } else {
                              this.auth = []
                        }
                  },
            },
            
      }
</script>

<style lang="scss" scoped>

</style>